<template>
  <default-layout>
    <header-back :text="title" slot="header"></header-back>
    <div slot="main">
      <div class="top">
        <div class="icon">
          <i class="xffont xf-qian"></i>
        </div>
        <span>{{order.name}}</span>
      </div>
      <div class="form-list">
        <div class="form-list-item">
          <span class="label">交易金额：</span>
          <span class="content">{{order.totalFee}}元</span>
        </div>
        <div class="form-list-item">
          <span class="label">创建时间：</span>
          <span class="content">{{$dateFormat(order.createDate).format('YYYY-MM-DD HH-mm-ss')}}</span>
        </div>
        <div class="form-list-item">
          <span class="label">订单号：</span>
          <span class="content">{{order.orderNumber}}</span>
        </div>
        <div class="form-list-item">
          <span class="label">订单状态：</span>
          <span class="content">{{order.state}}</span>
        </div>
      </div>
    </div>
  </default-layout>
</template>
<script>
  import HeaderBack from '../../../components/header-back/header-back.vue'
  import DefaultLayout from '../../../layouts/default-layout/default-layout'
  import {mapGetters} from 'vuex'

  export default {
    components: {DefaultLayout, HeaderBack},
    computed: {
      ...mapGetters([
        'order'
      ])
    },
    data() {
      return {
        title: ''
      }
    },
    created() {
      if (!this.order) {
        this.$router.back()
        return
      }
      switch (this.$route.query.type) {
        case 'party':
          this.title = '党员缴费'
          break
        default:
          this.title = '继续教育缴费'
      }
    }
  }
</script>
<style scoped lang="scss">
  @import "../../../common/style/variable";

  .top {
    padding: 1.5rem 0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #ededed;
    .icon {
      width: .8rem;
      height: .8rem;
      background: #f15a59;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .xffont {
      color: #fff;
      font-size: .5rem;
    }
    span {
      font-size: .38rem;
      font-weight: 300;
      margin: 0 0 0 .15rem;
    }
  }
</style>
